<script setup lang="ts">
import SysDialog from '@/components/SysDialog/index.vue';
import useBaseModel from '@/composables/custcare/reply/useBaseModel';
import useReplyAddAndEdit from '@/composables/custcare/reply/useReplyAddAndEdit';
import useDialog from '@/hooks/useDialog';

// 基础数据
const { addModel, rules } = useBaseModel()

// 弹框
const { dialog, onShow, onClose } = useDialog()

// 注册事件
const emit = defineEmits(['save'])

const { replyGroupData, onConfirm, show, sortHandleChange, addReplyForm, headerObj, uploadUrl, handleImgSuccess, beforeImgUpload } = useReplyAddAndEdit(dialog, onShow, onClose, addModel, emit)

// 暴露方法给外部使用
defineExpose({
    show
})

</script>
<template>
    <SysDialog :title="dialog.title" :height="460" :visible="dialog.visible" @onClose="onClose" @onConfirm="onConfirm">
        <template v-slot:content>
            <el-form :model="addModel" ref="addReplyForm" :rules="rules" label-width="100px" class="reply-form">
                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-alert type="info" show-icon :closable="false">
                            <p>多个关键字以英文 , 分隔</p>
                        </el-alert>
                        <el-form-item prop="key_words" label="关键字">
                            <el-input v-model="addModel.key_words"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="group_id" label="类型">
                            <el-select v-model="addModel.group_id" placeholder="选择类型">
                                <el-option v-for="item in replyGroupData.data" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="question" label="问题">
                            <el-input v-model="addModel.question"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="content" label="回复内容">
                            <el-input v-model="addModel.content" type="textarea" :rows="4"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="sort" label="显示排序">
                            <el-input-number v-model="addModel.sort" class="mx-4" :min="0" controls-position="right"
                                @change="sortHandleChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="status" label="状态">
                            <el-radio-group v-model="addModel.status">
                                <el-radio label="1">正常</el-radio>
                                <el-radio label="2">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="img" label="图片">
                            <el-upload class="wave-uploader" :action="uploadUrl" :show-file-list="false"
                                :on-success="handleImgSuccess" :before-upload="beforeImgUpload" :headers="headerObj">
                                <input type="hidden" v-model="addModel.img" />
                                <img v-if="addModel.img" :src="addModel.img" class="wave-img" />
                                <el-icon v-else class="wave-uploader-icon">
                                    <Plus />
                                </el-icon>
                                <template #tip>
                                    <div class="el-upload__tip">
                                        支持JPG、PNG格式的图片，大小不能超过4MB。
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
    </SysDialog>
</template>
<style lang="scss" scoped>
.el-alert {
    margin-bottom: 5px;
}
</style>
